<template>
  <div class="article-list">
    <div class="goods-wrapper">
      <ul>
        <li v-for="article in articles" :key="article.article_id" @click="selectItem(article)">
          <goods :showLabelTitle="showLabelTitle" :goods="article"></goods>
        </li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import goods from 'components/goods/goods'

export default {
  name: 'article-list',
  props: {
    articles: {
      type: Array,
      default: () => []
    },
    showLabelTitle: {
      type: Boolean,
      default: true
    }
  },
  components: {
    goods
  },
  methods: {
    selectItem (article) {
      this.$emit('selectItem', article)
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.article-list
  margin-top: 8px
  padding: 0px 5px
  background-color: #EEEEEE
</style>
